import { getSpaceUsageAnalyzeUsingPost } from '@/services/backend/spaceAnalyzeController';
import { Card, Progress, Space, Typography } from 'antd';
import React, { useEffect, useState } from 'react';

interface Props {
  queryAll?: boolean;
  queryPublic?: boolean;
  spaceId?: number;
}

const SpaceUsageAnalyzeCard: React.FC<Props> = (props) => {
  const { queryAll, queryPublic, spaceId } = props;
  const [spaceUsageAnalyze, setSpaceUsageAnalyze] = useState<API.SpaceUsageAnalyzeResponse>();
  useEffect(() => {
    const loadData = async () => {
      const res = await getSpaceUsageAnalyzeUsingPost({
        queryAll,
        queryPublic,
        spaceId,
      });
      setSpaceUsageAnalyze(res.data);
    };
    loadData();
  }, [spaceId]);
  return (
    <>
      <Space>
        <Card title={'存储空间'}>
          <div style={{ textAlign: 'center', width: '320px' }}>
            <Typography.Title level={4}>
              {' '}
              {`${(spaceUsageAnalyze?.usedSize / (1024 * 1024)).toFixed(2)}MB/${(
                spaceUsageAnalyze?.maxSize /
                (1024 * 1024)
              ).toFixed(2)}MB`}
            </Typography.Title>
            <Progress type={'dashboard'} percent={spaceUsageAnalyze?.sizeUsageRatio} />
          </div>
        </Card>
        <Card title={'存储数量'}>
          <div style={{ textAlign: 'center', width: '320px' }}>
            <Typography.Title level={4}>
              {' '}
              {`${spaceUsageAnalyze?.usedCount}/${spaceUsageAnalyze?.maxCount}`}
            </Typography.Title>
            <Progress type={'dashboard'} percent={spaceUsageAnalyze?.countUsageRatio} />
          </div>
        </Card>
      </Space>
    </>
  );
};

export default SpaceUsageAnalyzeCard;
